<template>
  <view class="notice-list-container">
    <!-- 顶部标题 -->
    <view class="page-header">
      <text class="page-title">消息通知</text>
    </view>
    
    <!-- 通知列表 -->
    <scroll-view 
      class="notice-scroll-view"
      scroll-y
      @scrolltolower="loadMore"
      :scroll-with-animation="true"
    >
      <view class="notice-list">
        <view 
          class="notice-item"
          v-for="(item, index) in noticeList"
          :key="index"
          @click="viewDetail(item)"
        >
          <view class="notice-icon">
            <uni-icons 
              :type="getNoticeIcon(item.type)" 
              size="24" 
              :color="getNoticeColor(item.type)"
            ></uni-icons>
          </view>
          <view class="notice-content">
            <view class="notice-title">
              <text>{{ item.title }}</text>
              <text class="notice-time">{{ formatTime(item.time) }}</text>
            </view>
            <view class="notice-desc">
              <text>{{ item.content }}</text>
            </view>
          </view>
          <view class="notice-arrow">
            <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
          </view>
        </view>
        
        <!-- 加载更多提示 -->
        <view class="load-more" v-if="loading">
          <uni-load-more status="loading"></uni-load-more>
        </view>
        <view class="load-more" v-if="noMore">
          <text>没有更多了</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { formatTime } from '@/utils/util.js'

// 通知类型
const NOTICE_TYPE = {
  SYSTEM: 1,    // 系统通知
  ORDER: 2,     // 订单通知
  ACTIVITY: 3,  // 活动通知
  COUPON: 4     // 优惠券通知
}

// 通知列表数据
const noticeList = ref([])
const page = ref(1)
const pageSize = 20
const loading = ref(false)
const noMore = ref(false)

// 初始化加载数据
const loadData = () => {
  if (loading.value || noMore.value) return
  
  loading.value = true
  // 模拟API请求延迟
  setTimeout(() => {
    // 模拟数据
    const newData = generateMockData(page.value, pageSize)
    if (newData.length === 0) {
      noMore.value = true
    } else {
      noticeList.value = [...noticeList.value, ...newData]
      page.value++
    }
    loading.value = false
  }, 800)
}

// 生成模拟数据
const generateMockData = (page, size) => {
  if (page > 3) return [] // 模拟只有3页数据
  
  const types = [NOTICE_TYPE.SYSTEM, NOTICE_TYPE.ORDER, NOTICE_TYPE.ACTIVITY, NOTICE_TYPE.COUPON]
  const titles = {
    [NOTICE_TYPE.SYSTEM]: ['系统维护通知', '新版本更新提醒', '账号安全提示'],
    [NOTICE_TYPE.ORDER]: ['订单发货通知', '订单支付成功', '订单已完成'],
    [NOTICE_TYPE.ACTIVITY]: ['限时优惠活动', '新品上线通知', '会员专属福利'],
    [NOTICE_TYPE.COUPON]: ['优惠券到账提醒', '优惠券即将过期', '专属优惠券发放']
  }
  
  const contents = {
    [NOTICE_TYPE.SYSTEM]: [
      '系统将于2023年6月1日凌晨2:00-4:00进行维护升级',
      '新版本v2.3.0已上线，点击查看更新内容',
      '检测到您的账号在异地登录，如非本人操作请及时修改密码'
    ],
    [NOTICE_TYPE.ORDER]: [
      '您的订单202306011234已发货，快递单号：YT123456789',
      '订单202306011235支付成功，金额：¥199.00',
      '订单202306011236已完成，期待您的再次光临'
    ],
    [NOTICE_TYPE.ACTIVITY]: [
      '夏季大促，全场5折起，活动时间6.1-6.3',
      '新品「夏日清凉系列」已上线，立即查看',
      '会员专属：充值送好礼，最高可得¥100优惠券'
    ],
    [NOTICE_TYPE.COUPON]: [
      '您已获得¥20无门槛优惠券，有效期至2023-06-30',
      '您有3张优惠券即将在3天后过期，请尽快使用',
      '恭喜您获得会员专属¥50优惠券，点击查看'
    ]
  }
  
  const data = []
  const now = new Date()
  
  for (let i = 0; i < size; i++) {
    const type = types[Math.floor(Math.random() * types.length)]
    const titleIndex = Math.floor(Math.random() * titles[type].length)
    const contentIndex = Math.floor(Math.random() * contents[type].length)
    
    data.push({
      id: `notice_${page}_${i}`,
      type,
      title: titles[type][titleIndex],
      content: contents[type][contentIndex],
      time: new Date(now.getTime() - Math.floor(Math.random() * 7 * 24 * 60 * 60 * 1000)),
      read: Math.random() > 0.5
    })
  }
  
  // 按时间降序排序
  return data.sort((a, b) => b.time - a.time)
}

// 获取通知图标
const getNoticeIcon = (type) => {
  const icons = {
    [NOTICE_TYPE.SYSTEM]: 'info',
    [NOTICE_TYPE.ORDER]: 'cart',
    [NOTICE_TYPE.ACTIVITY]: 'sound',
    [NOTICE_TYPE.COUPON]: 'gift'
  }
  return icons[type] || 'info'
}

// 获取通知颜色
const getNoticeColor = (type) => {
  const colors = {
    [NOTICE_TYPE.SYSTEM]: '#FF8C00',
    [NOTICE_TYPE.ORDER]: '#4CAF50',
    [NOTICE_TYPE.ACTIVITY]: '#FF5722',
    [NOTICE_TYPE.COUPON]: '#9C27B0'
  }
  return colors[type] || '#FF8C00'
}

// 加载更多
const loadMore = () => {
  loadData()
}

// 查看详情
const viewDetail = (item) => {
  uni.navigateTo({
    url: `/pages/notice/detail?id=${item.id}`
  })
}

// 页面加载
onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>

.notice-list-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: $light-bg;
}

.page-header {
  padding: 30rpx;
  background-color: $white-bg;
  
  .page-title {
    font-size: $font-size-32rpx;
    font-weight: bold;
    color: $text-color;
  }
}

.notice-scroll-view {
  flex: 1;
  height: calc(100vh - 100rpx);
}

.notice-list {
  padding: 20rpx;
}

.notice-item {
  display: flex;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: $white-bg;
  border-radius: 10rpx;
  
  .notice-icon {
    margin-right: 20rpx;
  }
  
  .notice-content {
    flex: 1;
    
    .notice-title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15rpx;
      
      text {
        font-size: $font-size-30rpx;
        color: $text-color;
        font-weight: bold;
      }
      
      .notice-time {
        font-size: $font-size-24rpx;
        color: $text-color-666;
      }
    }
    
    .notice-desc {
      font-size: $font-size-26rpx;
      color: $text-color-666;
      @include text-ellipsis(2);
    }
  }
  
  .notice-arrow {
    display: flex;
    align-items: center;
    margin-left: 20rpx;
  }
}

.load-more {
  padding: 30rpx 0;
  text-align: center;
  font-size: $font-size-26rpx;
  color: $text-color-666;
}
</style>